<!doctype html>
<html>
	<head>
  		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  		<meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> 
  		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  		<meta name="apple-mobile-web-app-capable" content="yes">
  		<title>luckydraw</title>
		<script src="/js/browser.js"></script>
		<script src="/js/touchEvent.js"></script>
		<style>
			body { 
				position: fixed;
				left:0; right: 0; top: 0; bottom: 0;
				overflow: hidden;
				font-size: 16px;
				font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
				background-color: #ffffff;
			}
			.outwrap { 
				position: absolute;
				left: 0; top: 0;
				width: 100%; height: 100%;
				overflow-x: hidden; overflow-y: auto;
				-webkit-overflow-scrolling: 'touch';
			}
			.row { 
			 	margin: 0;
				padding: 5px;
			}
			.smashegg { 
				width: 80%;
			}
			.center { 
				text-align: center;
			}
			.draw { 
				font-size: 22px;
				padding: 5px 10px;
			}
			.winaprice, .lose { 
				position: absolute;
				width: 100%; height: 100%;
				left: 0; top: 0;
				overflow: auto;
				background-color: #ffffff;
				-webkit-overflow-scrolling: 'touch';
				-webkit-transform: translate3d(100%, 0, 0);
						transform: translate3d(100%, 0, 0);
				z-index: 9;
			}
			.winaprice.show, .lose.show { 
				-webkit-transform: translate3d(0,0,0);
						transform: translate3d(0,0,0);
			}
		</style>
		<script>
			var config = <%- data.config %>;
			var winners = <%= data.winners %>;
			var eventId = <%= data.eventId %>;
		</script>
	</head>
	<body>
		<div class="outwrap">
			<div class="content">
				<div class="row center">
					<img class="smashegg" src="/images/ld/3/smashegg.gif">
				</div>
				<div class="row center">
					<button class="draw">点击开砸</button>
				</div> 
			</div> 
		</div>
		<div class="winaprice">
			<div style="margin-top: 100px; text-align: center; font-size: 22px; color: #ff0000;">
				恭喜你！！
			</div> 
		</div>
		<div class="lose">
			<div style="margin-top: 100px; text-align: center; font-size: 22px; color: #ff0000;">
				谢谢！！
			</div> 
		</div>

		<script src="/vendor/jQuery/dist/jquery.min.js"></script>
		<script>
			var ld = $('.draw');
			ld.on('tap', function(){ 
				var self = $(this);
				if(self.attr('processing')){ 
					return
				}
				self.attr('processing','1');
				if(winners >= config.limit){ 
					$('.lose').addClass('show');
					return
				}
				$.post('/lucky/' + eventId, 'json')
					.then(function(res){ 
						console.log(res);
						if(res.lucky){ 
							$('.winaprice').addClass('show');	
						}else{ 
							$('.lose').addClass('show');
						}
					})
					.fail(function(err){ 
						console.log(err);	
						self.removeAttr('processing');
					});
			});
		</script>
	</body>
</html>
